<script name="H5" setup>
import "@/utils/rem";
import { reactive, ref, onMounted } from "vue";
import { receiveBenefit, getPhoneCode } from "@/api/h5/index";
import { listEquity } from "@/api/member/list";
import { useRouter } from "vue-router";
import { showToast } from "vant";
import { showDialog } from "vant";
const loading = ref(false);

const router = useRouter();
const send = ref("获取验证码");
const formData = reactive({
  userName: "",
  phoneNumber: "",
});
const equityCode = router.currentRoute.value.query.c;
const sellPrice = ref();
const equityName = ref();
const equityType = ref();
//根据权益code查询权益相关信息
function getList() {
  listEquity({ page: 1, size: 1, equityCode }).then((res) => {
    console.log(res);
    sellPrice.value = res.rows[0].price;
    equityName.value = res.rows[0].equityName;
    equityType.value = res.rows[0].equityType;
    document.title = `${equityName.value}领取`;
  });
}
getList();
/**获取手机验证码 */
const time = ref(60);
const codeTime = ref(false);
const getCode = () => {
  const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;

  if (
    formData.userName &&
    formData.phoneNumber &&
    reg.test(formData.phoneNumber)
  ) {
    getPhoneCode({
      phoneNumber: formData.phoneNumber,
    }).then((res) => {
      console.log(res.msg);
      if (res.code == 200) {
        codeTime.value = true;
        const timer = setInterval(() => {
          time.value--;
          if (time.value >= 0) {
            send.value = time.value + "s后刷新";
          } else if (time.value < 0) {
            send.value = "获取验证码";
            codeTime.value = false;
            clearInterval(timer);
            time.value = 60;
          }
        }, 1000);
      }
    });
  } else {
    showToast("请输入正确的手机号和用户名！");
  }
};
const btnFlag = ref(false);
const getInfo = async () => {
  const PReg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
  if (!formData.userName || !formData.phoneNumber || !formData.code) {
    showToast("领取人,领取手机号,验证码不能为空！");
    return false;
  }
  if (!PReg.test(formData.phoneNumber)) {
    showToast("手机号格式错误！");
    return false;
  }
  btnFlag.value = true;
  loading.value = true;
  await receiveBenefit({
    userName: formData.userName,
    rechargeNumber: formData.phoneNumber,
    phoneNumber: formData.phoneNumber,
    msgCode: formData.code,
    sellPrice: sellPrice.value,
    equityName: equityName.value,
    equityType: equityType.value,
    equityCode,
  })
    .then((res) => {
      // console.log(res, "abc");
      if (res.code == 200) {
        showDialog({
          title: "提示",
          message: "您已成功领取！",
        }).then(() => {
          formData.userName = "";
          formData.phoneNumber = "";
          formData.code = "";
        });
      }
      if (res.code == 202) {
        showDialog({
          title: "提示",
          message: res.msg,
        }).then(() => {});
      }
    })
    .catch((err) => {
      // showToast(err);
      btnFlag.value = false;
      loading.value = false;
    })
    .finally(() => {
      btnFlag.value = false;
      loading.value = false;
    });
};
// md5.appendAsciiStr(`helloworld`)
const onSubmit = async () => {
  await getInfo();
};

/**END */
</script>
<template>
  <div style="max-width: 750px; margin: 0 auto" class="bg" v-loading="loading">
    <div class="form">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="formData.userName"
            name="姓名"
            label="姓名"
            placeholder="请输入姓名"
          />

          <van-field
            v-model="formData.phoneNumber"
            name="手机号"
            label="手机号"
            placeholder="请输入手机号"
            center
          >
            <template #button>
              <van-button
                @click="getCode"
                :disabled="codeTime"
                size="small"
                type="primary"
              >
                {{ send }}</van-button
              >
            </template>
          </van-field>

          <van-field
            v-model="formData.code"
            name="验证码"
            label="验证码"
            placeholder="请输入验证码"
            maxlength="4"
          />
          <div style="margin: 16px">
            <van-button
              round
              block
              type="primary"
              native-type="submit"
              :disabled="btnFlag"
            >
              领 取
            </van-button>
          </div>
        </van-cell-group>
      </van-form>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.form {
  width: 7rem;
  height: 7rem;
  position: relative;
  top: 35%;
  left: 50%;
  margin-left: -3.5rem;
}
.bg {
  height: 100%;
  background: url("https://fx.yunyoutongxin.com/image/hflq.gif") no-repeat;
  background-size: 100% 100%;
}
.orderlist {
  p {
    font-size: 12px;
    line-height: 1.5em;
    padding-left: 0.4rem;
  }
}
.mb {
  margin-bottom: 0.1rem;
  padding: 0.2rem;
}
:deep(.van-popup--center.van-popup--round) {
  width: 80%;
}
</style>
